<!DOCTYPE HTML>
<html onselectstart="return false">

<head>
    <meta charset="utf-8">
    <title>3D拖拽相册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background: #000;
        }
        
        #wrap {
            width: 120px;
            height: 180px;
            margin: 150px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg) rotateX(-10deg);
        }
        
        #wrap img {
            width: 120px;
            height: 180px;
            position: absolute;
            border-radius: 3px;
            box-shadow: 0 0 5px #fff;
            -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, .2));
            /*倒影为何没效果倒影为何没效果是 求大神*/
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
        <img src="http://www.itit123.cn/image/14-02.jpg">
    </div>
    <script type="text/javascript">
        window.onload = onloadMethod();

        function onloadMethod() {
            var oWrap = document.getElementById("wrap");
            var oImg = oWrap.getElementsByTagName("img");
            var Deg = 360 / oImg.length;
            var x, y, x_, y_, xN, yN;
            var roX = -10,
                roY = 0;

            for (var i = 0; i < oImg.length; i++) {
                oImg[i].style.transform = 'rotateY(' + Deg * i + 'deg) translateZ(350px)';
                oImg[i].ondragstart = function() {
                    return false;
                }
            }

            document.onmousedown = function(ev) {
                ev = ev || window.event;
                x_ = ev.clientX;
                y_ = ev.clientY;
                this.onmousemove = function(ev) {
                    ev = ev || window.event;
                    x = ev.clientX;
                    y = ev.clientY;

                    xN = x - x_;
                    yN = y - y_;

                    roY += xN * 0.2;
                    roX -= yN * 0.1;

                    oWrap.style.transform = 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                    x_ = ev.clientX;
                    y_ = ev.clientY;
                }

                this.onmouseup = function() {
                    this.onmousemove = null;
                }
            }
        }
    </script>
</body>

</html>